<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter, RouterLink } from 'vue-router';
import TheNavBar from '../components/TheNavBar.vue';

const router = useRouter();
const currentSlide = ref(0);

// 轮播图片数组
const slides = [
  '/src/assets/登录.webp',
  '/src/assets/古城.webp',
  '/src/assets/水乡.webp',
  '/src/assets/雪山.webp'
];
let slideInterval = null;

onMounted(() => {
  // 启动轮播
  startSlideShow();
});

onUnmounted(() => {
  // 清除轮播定时器
  if (slideInterval) {
    clearInterval(slideInterval);
  }
});

// 平滑滚动
const scrollTo = (id) => {
  const element = document.getElementById(id);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
};

// 跳转到登录页
const goToLogPage = () => {
  router.push('/log');
};

// 轮播相关函数
const startSlideShow = () => {
  slideInterval = setInterval(() => {
    currentSlide.value = (currentSlide.value + 1) % slides.length;
  }, 3000); // 3秒切换一次
};
</script>

<template>
  <div class="min-h-screen font-sans antialiased relative flex flex-col items-center">
    <!-- 为HomeView特殊处理，不使用占位符，因为它是全屏背景设计 -->
    <!-- 轮播图片容器 - 覆盖整个页面 -->
    <div class="fixed inset-0 z-0">
      <div v-for="(slide, index) in slides" :key="index" 
           class="absolute inset-0 bg-cover bg-center transition-opacity duration-1000 ease-in-out"
           :class="{ 'opacity-100': index === currentSlide, 'opacity-0': index !== currentSlide }"
           :style="{ 'background-image': `url(${slide})` }"></div>
    </div>
    
    <!-- 背景遮罩 -->
    <div class="fixed inset-0 bg-gradient-to-r from-dark/80 to-dark/40 z-10"></div>

    <!-- 使用导航栏组件 -->
    <TheNavBar />

    <!-- 主要内容区域 -->
    <div class="relative z-20 min-h-screen flex items-center justify-center w-full">
      <div class="text-center py-20">
        <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-white mb-6 leading-tight text-shadow">
          与校友一起<br>探索精彩世界
        </h1>
        <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-10 max-w-2xl mx-auto">
          校友行 - 连接大学生旅行者的平台，让你的旅程不再孤单，与志同道合的伙伴一起创造美好回忆
        </p>
        <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
          <button @click="goToLogPage" class="px-8 py-3 rounded-full bg-orange-500 hover:bg-orange-600 text-white font-semibold text-lg transition-all duration-300 shadow-lg hover-scale">
            开始探索 <i class="fa fa-arrow-right ml-2"></i>
          </button>
          <RouterLink to="/know" class="px-8 py-3 rounded-full bg-white/20 hover:bg-white/30 text-white font-semibold text-lg transition-all duration-300 backdrop-blur-sm inline-block">
            了解更多 <i class="fa fa-info-circle ml-2"></i>
          </RouterLink>
        </div>
      </div>
    </div>


  </div>
</template>

<style scoped>
/* 全局样式导入 */
@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');

/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  .bg-blur {
    backdrop-filter: blur(8px);
  }
  .hover-scale {
    transition: transform 0.3s ease;
  }
  .hover-scale:hover {
    transform: scale(1.03);
  }
  .bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 5s ease-in-out;
    background-size: cover;
    background-position: center;
  }
  .bg-slider.active {
    opacity: 1;
  }
}

/* 隐藏HomeView中的导航栏占位符 */
:deep(.nav-placeholder) {
  display: none;
}
 
/* 自定义颜色变量 */
:root {
  --primary: #FF7A45; /* 保持原有的主色调 */
  --secondary: #40A9FF;
  --tertiary: #52C41A;
  --dark: #1F2937;
  --light: #F9FAFB;
  --orange-500: #FF9F43; /* 橙色主色调 */
  --orange-600: #FF8C00; /* 深橙色，用于悬停效果 */
}

/* 应用颜色 */
.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-tertiary {
  background-color: var(--tertiary);
}

.bg-dark {
  background-color: var(--dark);
}

.bg-light {
  background-color: var(--light);
}

.bg-orange-500 {
  background-color: var(--orange-500);
}

.bg-orange-600 {
  background-color: var(--orange-600);
}

.bg-orange-500\/20 {
  background-color: rgba(255, 159, 67, 0.2);
}

.bg-orange-500\/30 {
  background-color: rgba(255, 159, 67, 0.3);
}

.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-tertiary {
  color: var(--tertiary);
}

.text-dark {
  color: var(--dark);
}

.text-light {
  color: var(--light);
}

.text-orange-500 {
  color: var(--orange-500);
}

.text-orange-600 {
  color: var(--orange-600);
}

/* 焦点样式 */
.focus:ring-orange-500 {
  --tw-ring-color: var(--orange-500);
}

.focus:border-orange-500 {
  border-color: var(--orange-500);
}

/* 过渡动画 */
.transition-all {
  transition: all 0.3s ease;
}
 
.duration-300 {
  transition-duration: 300ms;
}

/* 轮播过渡效果 */
.transition-opacity {
  transition-property: opacity;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}
</style>